<template>
  <!-- 上拉加载 ：
           van-list
              v-model:是否处于加载中，滚动条距离底部小于300会处于加载 中
              finished:是否加载完成
              finished-text:加载 完成文本提示
              @load="加载 方法"
                    1：调用接口
                    2：调用完成要干什么？
                         a:数据要累加
                         b:v-model的值改成false
                         c:调用下一页请求参数
                         d:判断是否加载 完成
                             如果完成  finished=true  
                             
        下拉刷新：
             van-pull-refresh
                v-model:是否处于下拉刷新中
                @refresh:刷新方法
                              让它回到初始状态
                              v-model的值为false



        缓存列表要做的事情 
            1：App.vue
                  <keep-alive>
                    <router-view  />
                  </keep-alive>
            2:修改路由配制（修改路由元）
                {
                  meta:{
                    keep:true  // 需要缓存的路由
                  }
                } 
            3：调整App.vue
                  <keep-alive>
                    <router-view v-if="$route.meta.keep"  />
                  </keep-alive>
                  <router-view v-if="!$route.meta.keep"  />
            4:存储滚动条位置
                dom  @scroll="  获取它的scrollTop存储 "
            5：在激活时还原滚动条位置
                activated(){
                    dom.scrollTop=存储的scrollTop
                }


                              -->
  <div class="result" v-if="bol">
    <!--           
             this.$router.back()
             this.$router.go(-1)
             this.$router.go(0)
             this.$router.go(1)
             this.$router.forward()
     -->
    <van-nav-bar
      :title="q + '的搜索结果'"
      left-arrow
      @click-left="$router.push('/search')"
    ></van-nav-bar>
    <div class="content" @scroll="scrollEvent" ref="result">
      <van-pull-refresh v-model="isLoading" @refresh="refresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getData"
        >
          <van-cell
            v-for="item in list"
            :key="item.art_id"
            :title="item.title"
            :to="'/article?id=' + item.art_id + '&back=' + $route.fullPath"
          ></van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { search } from '@/api/result'
export default {
  data () {
    return {
      q: this.$route.params.q,
      list: [],
      loading: false,
      finished: false,
      page: 1,
      isLoading: false,
      bol: true,
      scrollTop: 0
    }
  },
  created () {
    console.log(this.$route)
    // this.getData()
  },
  activated () {
    // 还原滚动条位置
    this.$refs.result.scrollTop = this.scrollTop
    // 当传参变化后还原当前组件成初始状态
    if (this.q !== this.$route.params.q) {
      this.refresh()
    }
  },
  methods: {
    // 搜索列表获取
    async getData () {
      const res = await search({
        page: this.page, // 页码
        per_page: 5,
        q: this.q
      })
      this.list.push(...res.data.results)
      this.loading = false
      this.page++
      if (this.list.length >= res.data.total_count) {
        this.finished = true
      }

      console.log(res)
    },
    // 下拉刷新
    refresh () {
      this.q = this.$route.params.q
      this.list = []
      this.loading = false
      this.finished = false
      this.page = 1
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
        this.isLoading = false
      })
    },
    // 记录滚动条位置
    scrollEvent (e) {
      this.scrollTop = e.target.scrollTop
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  position: fixed;
  left: 0;
  top: 46px;
  bottom: 0;
  width: 100vw;
  overflow-y: auto;
}
</style>
